<template>
	<view class="page_1" v-if="goods">
		<view class="select" v-for="(item,index) in goods" :key="index" @click="selectid(index)">
			<view class="imgbox">
				<image :src="item.url"></image>
			</view>
			<view class="infobox">
				<view class="title">{{item.goods_title}}</view>
				<view class="text" style="margin: 5rpx 0;">X{{item.goods_num}} </view>
				<view class="text" style="color: red;">￥{{item.goods_price}} </view>
			</view>
			<view class="goubox">
				<image v-if="!item.select" src="../../static/yuan.png"></image>
				<image v-else src="../../static/gou.png"></image>
			</view>
		</view>
		<!-- <view class="box" v-for="(goods,index) in goods" :key="index">
			<image :src="goods.url"></image>
			<view class="title_box">
				<view class="title">{{goods.goods_title}}</view>
				<view class="text">{{goods.goods_title}} </view>
			</view>
		</view> -->

		<!-- 申请原因 -->
		<view class="apply_for_cause" v-if="goods">
			<view class="item" v-if="refund==2">
				<view>货物状态</view>
				<picker :range="statelist" range-key="title" @change="changestate">
					{{goods_status==null?'请选择':statelist[goods_status].title}}
				</picker>
			</view>
			<view class="item" v-if="refund==1||refund==2">
				<view>申请原因</view>
				<picker :range="reasonlist" range-key="title" @change="changereason">
					{{reasonindex==null?'请选择':reasonlist[reasonindex].title}}
				</picker>
			</view>
			<!-- 申请换货 -->
			<!-- <view class="item" v-if="refund==3">
				<view>换货原因</view>
				<picker :range="statelist" range-key="title" @change="changestate">
					{{stateindex==null?'请选择':statelist[stateindex].title}}
				</picker>
			</view> -->
			<view class="item" v-if="refund==3">
				<view>收货地址</view>
				<picker :range="reasonlist" range-key="title" @change="changereason">
					{{reasonindex==null?'请选择':reasonlist[reasonindex].title}}
				</picker>
				<!-- <view @click="showSqyy">请选择</view> -->
			</view>
		</view>

		<!-- 退款金额 -->
		<view class="price" v-if="refund==1||refund==2">
			<view>退款金额：</view>
			<view>
				<text>￥</text>
				<input type="text" placeholder="请输入选择退款商品" disabled v-model="finalpaymoney">
				<!-- <text>（可）</text> -->
			</view>
		</view>
		<!-- state判断是否退配送费费 1下单成功 3跑男抢单 4已到达 5已取件 6到达目的地 10收件人已收货 -1订单取消状态 5、6、10不退配送费 -->
		<view class="price" v-if="refund==1||refund==2">
			<view>配送费：</view>
			<view>
				<text>￥{{(info.freight_money*100)/100}}</text>
				<text style="margin-left: 20rpx;" v-if="info">{{info.state==5||info.state==6||info.state==10?'（配送费不可退）':'（可退）'}}</text>
			</view>
		</view>
		<view class="price" v-if="refund==1||refund==2">
			<view>优惠金额：</view>
			<view>
				<text>￥{{info.coupon_money}}</text>
				<text style="margin-left: 20rpx;" v-if="info">(优惠劵及金额不退)</text>
			</view>
		</view>

		<!-- 申请说明 -->
		<view class="description">
			<view class="top">
				<view>申请说明</view>
				<view>最大可以输入170字</view>
			</view>
			<textarea class="textarea" v-model="desc" placeholder="必填，请您详细填写申请说明"
				placeholder-class="textaareaClass"></textarea>
			<view class="upload_imgs">
				<view class="imgbox" v-for="(item,index) in imglist" :key="index">
					<image :src="item"></image>
					<image class="closen" src="../../static/gb.png" @click="spliceimg(index)"></image>
				</view>
				<view class="upload" @click="uploadimg()" v-if="imglist.length<6">
					<view class="borderbox">
						<image src="../../static/xj1.png"></image>
						<view>添加图片</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view style="height: 130rpx;"></view>
		<view class="btn_box" @click="sumbit()">
			<view>提交申请</view>
		</view>

		<uni-popup class="popup" ref="popup1" title="申请原因">

		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				refund: 3, //退款的类型  1我要退款退货 2我要退款(无需退货）3申请换货
				refound_money: '',
				reasonlist: [{
					id: 1,
					title: '物流太慢'
				}, {
					id: 2,
					title: '不想要'
				}, {
					id: 3,
					title: '不喜欢'
				}, {
					id: 4,
					title: '其他原因'
				}],
				statelist: [{
					id: 0,
					title: '未收到货'
				}, {
					id: 1,
					title: '已收到货'
				}], //货物状态goods_status 0未收到 1已收到
				reasonindex: null,
				goods_status: null,
				stateindex: null,
				id: '', //订单id
				goods: [], //订单详情
				desc: '', //多行文本
				choose_all: '', //0否 1是
				list: [],
				imglist: [],
				fd: true, //防抖
				goods_id: [],
				delivery_method: '',
				info: {},
			};
		},
		onLoad(options) {
			//退款的类型	 1我要退款退货 2我要退款(无需退货）3申请换货
			this.refund = options.type || ""
			if (this.refund == 1) {
				uni.setNavigationBarTitle({
					title: '退款退货'
				});
			}
			if (this.refund == 2) {
				uni.setNavigationBarTitle({
					title: '我要退款(无需退货）'
				});
			}
			if (this.refund == 3) {
				uni.setNavigationBarTitle({
					title: '申请换货'
				});
			}
			this.id = options.id
			console.log(options, 'options')
			this.orderinfo(this.id)
		},
		computed: {
			finalpaymoney() {
				let finalpaymoney = 0;
				//state判断是否退配送费费 1下单成功 3跑男抢单 4已到达 5已取件 6到达目的地 10收件人已收货 -1订单取消状态 5、6、10不退配送费
				this.goods.map(item => {
					item.select ? finalpaymoney += parseInt(item.goods_num) * item.goods_price : finalpaymoney += 0
				})
				if(finalpaymoney>0){
					if((this.info.state==5||this.info.state==6||this.info.state==10)){
						
					}else{
						finalpaymoney = (finalpaymoney*100 + (this.info.freight_money*100))/100
					}
					finalpaymoney = finalpaymoney - this.info.coupon_money
				}
				// return totalPrice
				return parseFloat(finalpaymoney.toFixed(2)) // 保留小数点后2位
			}
		},
		methods: {
			// 申请原因弹出层
			showSqyy() {
				this.$refs.popup1.open('bottom')
			},
			//选择退回原因
			changereason(e) {
				this.reasonindex = e.detail.value
				console.log(e.detail.value)
			},
			//选择货物状态
			changestate(e) {
				this.goods_status = e.detail.value //货物状态goods_status 0未收到 1已收到
			},
			//获取订单详情
			orderinfo(orderid) {
				this.$http({
					url: 'api/Wechat/orderDetail',
					data: {
						orderid: orderid
					}
				}).then(res => {
					this.info = res.data
					this.goods = res.data.goods
					this.delivery_method = res.data.delivery_method
				})
			},
			//提交申请
			sumbit() {
				const b = this.goods.filter(item => item.select == true)
				b.forEach(item => (this.goods_id.push("" + item.goods_id)))
				if (b.length == this.goods.length || b.length == 1) {
					if (b.length == this.goods.length) {
						this.choose_all = 1 //0否 1是
					} else {
						this.choose_all = 0
						this.list = this.goods.filter((item) => {
							return item.select
						})

					}
				}
				console.log(b, 'b', this.goods_id)
				if (b.length == 0) {
					uni.showToast({
						title: '必须选择商品',
						icon: 'none'
					})
					return
				}
				if (this.refund == 1 || this.refund == 2) {
					if (!this.finalpaymoney) {
						uni.showToast({
							title: '请填写金额',
							icon: 'none'
						})
						return
					}
				}
				if (this.fd) {
					this.fd = false
					setTimeout(() => {
						this.fd = true
					}, 3000)
					this.$http({
						url: 'api/Wechat/afterSale',
						data: {
							orderid: this.id,
							type: this.refund,
							goods_id: this.goods_id.join(','),
							desc: this.desc,
							refound_money: this.finalpaymoney,
							choose_all: this.choose_all,
							content: this.reasonindex == null ? '' : this.reasonlist[this.reasonindex].title,
							picarr: this.imglist
						}
					}).then(res => {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						setTimeout(() => {
							// this.currindex = option.currindex  //0==物流订单，1==自提订单
							//delivery_method、是否自提、1否 2是
							// this.delivery_method = this.delivery_method - 1
							console.log(this.delivery_method, this.delivery_method)
							uni.switchTab({
								url:'/pages/my/my'
							})
							// uni.reLaunch({ //currindex 0==物流订单，1==自提订单
							// 	url: "/pageshop/goodsorder/goodsorder?type=" + (5) +
							// 		'delivery_method=' + this.delivery_method +'&order_type='+(1)
							// })
						}, 1000)
					})
				}

			},
			selectid(index) {
				this.goods[index].select = !this.goods[index].select
				this.goods = [...[], ...this.goods]
			},
			//添加图片
			uploadimg() {
				this.$upload(1).then(res => {
					this.imglist.push(...res)
					console.log(this.imglist, 'this.imglist', res) //item.file.full_url
				})
			},
			//删除图片
			spliceimg(index) {
				this.imglist.splice(index, 1)
			},
		}
	}
</script>
<style>
	.textaareaClass {
		font-size: 28rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #888888;
	}
</style>
<style lang="scss" scoped>
	.page_1 {
		padding-bottom: 106rpx;
	}

	.select {
		display: flex;
		background: #FFFFFF;
		width: 100%;
		align-items: center;

		.imgbox {
			width: 27%;
			text-align: center;

			image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 7rpx;
			}
		}

		.infobox {
			width: 60%;

			.title {
				font-size: 28rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #333333;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.text {
				font-size: 26rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #555555;
			}
		}

		.goubox {
			width: 13%;
			text-align: center;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.box {
		width: 750rpx;
		min-height: 188rpx;
		background: #FFFFFF;
		border-radius: 14rpx;
		padding: 10rpx 48rpx 14rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;

		.radio {
			.btn_radio {
				transform: scale(0.9)
			}
		}

		image {
			width: 160rpx;
			height: 160rpx;
			flex-shrink: 0;
			margin: 0 26rpx 0 0;
		}

		.title_box {
			height: 100%;
			display: flex;
			flex-direction: column;
			width: 100%;
			gap: 26rpx 0;

			.title {
				font-size: 28rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #333333;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				line-height: 1em;
				margin-top: 16rpx;
			}

			.text {
				font-size: 26rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #555555;
				line-height: 1em;
			}
		}
	}

	// 申请原因
	.apply_for_cause {
		width: 750rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		box-sizing: border-box;
		margin-top: 24rpx;

		& .item:last-child {
			border: none;
		}

		.item {
			margin: 0 28rpx;
			width: calc(100% - 56rpx);
			height: 98rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2rpx solid #F1F1F1;

			>view {
				font-size: 28rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #222222;
			}

			>picker {
				width: 500rpx;
				text-align: right;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #888888;
			}

			// :last-child {
			// 	font-size: 28rpx;
			// 	font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			// 	font-weight: 400;
			// 	color: #888888;
			// }
		}
	}

	// 退款进而
	.price {
		width: 750rpx;
		height: 98rpx;
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		padding: 0 28rpx;
		margin-top: 26rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;

		:first-child {
			flex-shrink: 0;
		}

		:last-child {
			display: flex;
			align-items: center;

			input {
				width: 260rpx;
				color: #F94D29;
			}

			text:first-child {
				color: #F94D29;
			}

			text:last-child {
				font-size: 24rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #888888;
			}
		}
	}

	// 申请说明
	.description {
		width: 100%;
		// height: 485rpx;
		margin-top: 24rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 34rpx 0;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			flex-shrink: 0;
			width: 95%;
			margin: 0 auto;

			:first-child {
				color: #222222;
				line-height: 1em;
			}

			:last-child {
				color: #555555;
				line-height: 1em;
			}
		}

		.textarea {
			height: 230rpx;
			// margin-top: 34rpx;
			width: 95%;
			margin: 34rpx auto 0 auto;
		}

		.upload_imgs {
			display: flex;
			flex-wrap: wrap;
			width: 100%;
			width: 95%;
			margin: 0 auto;

			.imgbox {
				width: 25%;
				text-align: center;
				position: relative;

				image {
					width: 150rpx;
					height: 150rpx;
				}

				.closen {
					width: 40rpx;
					height: 40rpx;
					border-radius: 100%;
					position: absolute;
					right: 0;
					z-index: 3;
				}
			}

			.upload {
				width: 25%;
				text-align: center;
				font-size: 24rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #DBDBDB;

				.borderbox {
					width: 157rpx;
					height: 157rpx;
					border: dashed 2rpx #DBDBDB;

					image {
						width: 49rpx;
						height: 50rpx;
						margin: 30rpx 0 20rpx 0;
					}
				}
			}
		}
	}

	// 底部按钮
	.btn_box {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 104rpx;
		background-color: #FFF;
		z-index: 9;

		>view {
			width: 690rpx;
			height: 84rpx;
			background: linear-gradient(360deg, #F99529 0%, #F94D29 100%);
			border-radius: 83rpx 83rpx 83rpx 83rpx;
			margin: 10rpx auto;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;
		}
	}

	// 弹出层样式
</style>